<template>
    <view class="progress-box">
        <text>测评进度条</text>
        <progress class="progress" :percent="percent" border-radius="40" stroke-width="9" color="#cce3ff"
            activeColor="#2d8dfe" :active="true" active-mode="forwards" duration="15"></progress>
        <text>{{proDonenum}}/{{totalnum}}</text>
    </view>
    <!-- 题目 -->
    <view class="question">{{problemData.data.topic}}</view>
    <!-- 单选题 -->
    <view class="topic-view">
        <view class="topic-Title">
            <text>{{}}</text>
            <text>单选题</text>
        </view>
        <view class="totic" hover-class="hover-style" hover-stay-time="300" v-for="(item,index) in data.options"
            :key="index" @click="choose(item.son_id)">{{item.title}}</view>
    </view>
</template>
<script setup lang="ts">
import { Topic } from '@/public/decl-type';
import { isUnionTypeAnnotation, tSLiteralType } from '@babel/types';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { reactive, ref, toRefs } from 'vue';
import requestApi from '@/public/request'
//所有题目
let totalPro = ref<Topic[]>([])
//展示的题目
let problemData = reactive<{ data: Topic }>({
    data: {
        topic: "",
        _id: "",
        options: []
    }
})
let { data } = toRefs(problemData);
//总共题目数
let totalnum = ref<number>(0);
//已答完的题目数
let proDonenum = ref<number>(0)
let proDonenum_s = ref<number>(0)
//上个页面传过来的题目类型
let judgePnum = ref<string>()
//进度条百分比
let percent = ref(0);
//已经答过的题目id数组
let proIdarray = ref<string[]>([])
//请求到的数据类型
interface Resdata {
    data: { data: Topic[] }
}
//选题
function choose(son_id: string) {
    console.log(proDonenum.value, totalnum.value);
    proDonenum.value++;
    if (proDonenum.value < totalnum.value) {
        proDonenum_s.value++;
        percent.value = (100 / totalnum.value) * proDonenum.value
        problemData.data = totalPro.value[proDonenum_s.value];
        proIdarray.value.push(son_id);
    } else {
        let OBJ = JSON.stringify({ type: judgePnum.value, topic_id: proIdarray.value })
        uni.navigateTo({
            url: "/pages/self_test/result?value=" + OBJ
        })
    }
}
onShow(async () => {
    totalPro.value = [];
    proDonenum.value = 0;
    proDonenum_s.value = 0;
    percent.value = 0;
    totalnum.value = 0
    if (judgePnum.value == '001') {//抑郁症测评；
        var res = await requestApi.DepressionTopics() as Resdata
    } else if (judgePnum.value == '002') {//男性功能测评；
        var res = await requestApi.PrematureTopics() as Resdata
    } else {//失眠程度测评
        var res = await requestApi.InsomniaTopics() as Resdata
    }
    totalPro.value = res.data.data;
    problemData.data = totalPro.value[0];
    totalnum.value = totalPro.value.length;
    // percent.value = (100 / totalnum.value)
})
onLoad((data: any) => {
    let { title, type } = data as { title: string; type: string }
    uni.setNavigationBarTitle({ title });
    judgePnum.value = type

})
</script>
<style lang="scss">
page {
    background: linear-gradient(to bottom, #d6e8ff 30%, #f2f7fb 55%, #f0f5f9 90%);
}

.progress-box {
    display: flex;
    align-items: center;
    padding: 20rpx;
}

.progress {
    flex: 1;
    padding: 0 40rpx;
}

.question {
    padding: 30rpx 20rpx;
    margin: 40rpx 20rpx;
    background-color: #ffffff;
    border-radius: 10rpx;
}

.topic-view {
    background-color: #f3f8ff;
    border-radius: 10rpx;
    padding: 20rpx;
    margin: 20rpx;
    box-shadow: #d6e8ff 0px 0px 23rpx 5rpx;
}

.topic-Title {
    display: flex;
    align-items: center;
}

.topic-Title text:nth-child(1) {
    width: 8rpx;
    height: 27rpx;
    background-color: #0d7cff;
    display: block;
    margin-right: 10rpx;
}

.totic {
    background: #ffffff;
    margin: 20rpx 0;
    padding: 40rpx 10rpx;
    border-radius: 10rpx;
}

.hover-style {
    background-color: #ebf4ff;
    color: #298cff;
}
</style>